React = require('react')
Card = require('antd-mobile/lib/card')
Flex = require('antd-mobile/lib/flex')
Icon = require('antd-mobile/lib/icon')
Toast = require('antd-mobile/lib/toast')
# {Popover} = require('antd-mobile/dist/antd-mobile.js')
Popover = require('antd-mobile/lib/popover')
Item = Popover.Item
Popup = require('antd-mobile/lib/popup')
RefreshControl = require('antd-mobile/lib/refresh-control')
Badge = require('antd-mobile/lib/badge')
{View,Picker,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
Picker = require('antd-mobile/lib/picker')
SearchBar = require('antd-mobile/lib/search-bar')
List = require('antd-mobile/lib/list')
{View} = require('react-native')
{fetchGetList,fetchRefreshList,fetchPilotStates} = require('../actions/page_yhypm.js')
{connect} = require('react-redux')
_ = require('underscore')
moment = require('moment')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')
Icon = require('antd-mobile/lib/icon')
DatePickerItem = (props)->
    <View style={{flex:1,flexDirection:'row'}}>
      <TouchableOpacity onPress={props.onClick}>
        <Text style={{fontSize:18,textAlign:'center',flex:1,width:100,color:'#ffffff'}} >{props.extra}</Text>
        <Icon type="down" />
      </TouchableOpacity>
    </View>
basePage = require('../mixins/basePage.js')

Page_Yhypm = React.createClass
  getInitialState:->
    selectedValue:["1"]
  mixins:[basePage]
  selectedValueChange:(value)->
    that = this
    this.setState {selectedValue: value},->
      that.refs.listView?.scrollTo {x:0,y:0,animated:false}
      @props.fetchRefresh(value)

  componentDidMount:->
    @props.fetchStates()
    # @props.fetchRefresh("1")
  pickerSelectedChange:(value)->
    that= @
    @setState {selectedValue: value},->
      that.refs.listView?.scrollTo {x:0,y:0,animated:false}
      @props.fetchRefresh(value[0])
  _renderHeader:->
    # triggerType="onClick"
    # <List.Item wrap={true} style={{backgroundColor:"#0066FF"}} arrow="down"></List.Item>

      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>

        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          {
            if @props.pilotStates?.length>0
              pData = for item in @props.pilotStates
                        label:item.VCSYSDESC
                        value:item.VCSYSVALUE
                        children:[]
              <Picker triggerType="onClick"  data={pData} cols={1} value={@state.selectedValue} onChange={@.pickerSelectedChange}>
                <DatePickerItem/>
              </Picker>


            }
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10,justifyContent:'center'}}>
        </View>
      </View>
  onSearchChangeHandle:(value)->
    # @setState filter:value
    if value
      @props.fetchRefresh("",value)
    else
      @props.fetchRefresh(@state.selectedValue,value)

  renderSearchBar:->
    <SearchBar placeholder='引航员姓名' onChange={@onSearchChangeHandle} ref={(ref)=>this.searchBar = ref} />
  _renderRow:(rowData,sectionID,rowID,highlightRow)->
    <View key={rowID} style={{flexDirection:'column',padding:10}}>
      <View  style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
        <View style={{width:40}}>
          <Text style={{color:'#0066FF'}}>{rowData.sortNum}</Text>
        </View>
        <View style={{width:60}}>
          <Text>{rowData.VCPILOTNAME}</Text>
        </View>
        <View style={{width:30}}>
          <Text style={{marginLeft:10}}>{rowData.CHPILOTGRADE}</Text>
        </View>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Text>{rowData.STATE}</Text>
        </View>
      </View>
      <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
        <View style={{width:40}}>
        </View>
        <View style={{width:200}}>
          <Text>{rowData.DTSTATIONTIME}</Text>
        </View>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Text>{rowData.VCSTATIONPLACE}</Text>
        </View>
      </View>
    </View>
  _renderListColumns:->




styles = StyleSheet.create
  row:
    flexDirection:'column'
    justifyContent:'center'
    padding:10
    backgroundColor:'#F6F6F6'
  text:
    flex:1
  ontextStyle:
    margin: 50,
    flex: 1,
  picker:
    width:40
    # color:'#ffffff'


# {
#   if @props.pilotStates?.length>0
#     <Picker
#       style={styles.picker}
#       mode={Picker.MODE_DROPDOWN}
#       selectedValue={this.state.selectedValue}
#       onValueChange={@selectedValueChange}>
#       {
#         do =>
#           for item in @props.pilotStates
#             <Picker.Item key={item.VCSYSVALUE} label={item.VCSYSDESC} value={item.VCSYSVALUE} />
#       }
#     </Picker>
#   }
mapStateToProps = (state)->
  debugger
  list:state.page_yhypm.list
  isLoading:state.page_yhypm.isLoading
  pageIndex:state.page_yhypm.pageIndex
  completed:state.page_yhypm.completed
  refreshing:state.page_yhypm.refreshing
  lastFetchTime:state.page_yhypm.lastFetchTime
  pilotStates:state.page_yhypm.pilotStates
  connected:state.appState.connected
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(pageNum,state,name)->
    dispatch fetchGetList(pageNum,state,name)
  fetchRefresh:(state,name)->
    dispatch fetchRefreshList(state,name)
  fetchStates:->
    dispatch fetchPilotStates()

module.exports = connect(mapStateToProps,mapDispatchToProps)(Page_Yhypm)
